<template>
  <div class="all_box">
    <!--基本信息-->
    <div class="Basics-box">
      <h1 class="Basics-title">
        <h2>基础信息</h2>
        <div class="button-group-right">
          <el-button type="change" @click="goEdit">修改</el-button>
          <el-button type="detail" @click="goInformation">详情</el-button>
        </div>
      </h1>
      <div class="companyName">
        <div>公司名称：</div>
        <div>{{this.$route.query.name}}</div>
      </div>
    </div>
    <!--基本结束-->
    <!--档案列表-->
    <div class="archives-list-box mb-10">
      <h1 class="Basics-title">
        <h2>档案列表</h2>
        <div class="button-group-right">
          <el-button type="BasicsBuild" @click="addDialogVisible =true">新建</el-button>
          <el-button type="BasicsMore" @click="getMore">更多</el-button>
        </div>
      </h1>
      <el-table
        ref="multipleTable"
        :data="tableArchives"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column prop="year" label="年份" width="110" align="center"></el-table-column>
        <el-table-column prop="title" label="档案名称"></el-table-column>
        <el-table-column prop="updatedTime" label="最后修改日期" width="305" align="center"></el-table-column>
        <el-table-column label="操作" width="197" align="center">
          <template slot-scope="scope">
            <el-button type="BasicsLook" @click="lookArchive(scope.row)">查看</el-button>
            <el-button type="BasicsEdit" @click="goArchiveEdit(scope.row)">编辑</el-button>
            <el-popconfirm
              title="确定删此该信息吗？"
              hideIcon
              cancelButtonType="button"
              @onConfirm="deletScope(scope.row)"
            >
              <el-button slot="reference" type="BasicsClear">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--档案列表结束-->
    <!--信访举报列表-->
    <div class="archives-list-box">
      <h1 class="Basics-title">
        <h2>信访列表</h2>
        <div class="button-group-right">
          <!-- <el-button type="BasicsBuild">新建</el-button> -->
          <el-button type="BasicsMore" @click="goLetter">更多</el-button>
        </div>
      </h1>
      <el-table
        ref="multipleTable"
        :data="tableLetters"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column prop="year" label="年份" width="110" align="center"></el-table-column>
        <el-table-column prop="personName" label="举报人" width="150" align="center"></el-table-column>
        <el-table-column prop="title" label="举报标题"></el-table-column>
        <el-table-column prop="type" label="举报类型" width="169" align="center"></el-table-column>
        <el-table-column prop="complainTime" label="举报日期" width="159" align="center"></el-table-column>
        <el-table-column label="受理程度" width="160" align="center">已受理</el-table-column>
        <el-table-column prop="name" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="BasicsLook" @click="goLetterMore(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--信访举报表结束-->
    <!--专项监督列表-->
    <div class="archives-list-box">
      <h1 class="Basics-title">
        <h2>专项监督</h2>
        <div class="button-group-right">
          <!-- <el-button type="BasicsBuild">新建</el-button> -->
          <el-button type="BasicsMore"  @click="letterMore">更多</el-button>
        </div>
      </h1>
      <el-table
        ref="multipleTable"
        :data="taskReportData"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="51" align="center"></el-table-column>
        <el-table-column prop="reportTitle" label="汇报标题" width="484"></el-table-column>
        <el-table-column prop="taskTitle" label="任务标题" width="484"></el-table-column>
        <el-table-column prop="taskType" label="任务类型" min-width="196" align="center"></el-table-column>
        <el-table-column prop="reportTime" label="举报日期" width="161" align="center"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="BasicsLook" @click="goSpecialLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--专项监督表结束-->
    <!--日常监督列表-->
    <div class="archives-list-box">
      <h1 class="Basics-title">
        <h2>日常监督</h2>
        <div class="button-group-right">
          <!-- <el-button type="BasicsBuild">新建</el-button> -->
          <el-button type="BasicsMore" @click="goDaily">更多</el-button>
        </div>
      </h1>
      <el-table
        ref="multipleTable"
        :data="rectifyReportDatas"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="51" align="center"></el-table-column>
        <el-table-column prop="reportTitle" label="整改报告名称"></el-table-column>
        <el-table-column prop="notificationTitle" label="通报标题"></el-table-column>
        <el-table-column prop="reportTime" label="汇报时间" width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="BasicsLook" @click="goDailyLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--日常监督表结束-->
    <!--巡视巡察列表-->
    <div class="archives-list-box">
      <h1 class="Basics-title">
        <h2>巡视巡察</h2>
        <div class="button-group-right">
          <!-- <el-button type="BasicsBuild">新建</el-button> -->
          <el-button type="BasicsMore" @click="goSurMore">更多</el-button>
        </div>
      </h1>
      <el-table
        ref="multipleTable"
        :data="problemData"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="51" align="center"></el-table-column>
        <el-table-column prop="category" label="问题分类" width="302" align="center"></el-table-column>
        <el-table-column prop="name" label="问题清单"></el-table-column>
        <el-table-column prop="finishedTime" label="最终提交时间" min-width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="BasicsLook" @click="goSuperviseMore(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--巡视巡察列表结束-->

    <!-- 新建档案列表 -->
    <el-dialog title="新建档案列表" :visible.sync="addDialogVisible" width="430px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="档案分类" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option label="班子民主生活会材料" value="1"></el-option>
            <el-option label="年度工作总结" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="档案名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入档案名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type:[],
      // 新建档案列表
      addDialogVisible: false,
      ruleForm: {
        name: "",
        region: "",
      },
      rules: {
        name: [
          { required: true, message: "请选择", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请输入档案名称", trigger: "change" },
        ],
      },
      //档案列表
      tableArchives: [],
      //信访列表
      tableLetters: [],
      //专项监督列表
      taskReportData: [],
      //日常监督列表
      rectifyReportDatas: [],
      //巡视巡查列表
      problemData: [],
    };
  },
  mounted(){
    this.archivelist()
    this.complainlist()
    this.taskReportlist()
    this.rectifyReportlist()
    this.problemlist()
  },
  methods: {
    archivelist(){
      let paramsJson = {
        id:this.$route.query.id
      }
      this.Api.archivelist(paramsJson).then((res) => {
        if (res.code == 0) {
          this.tableArchives = res.data
        }
      })
    },
    complainlist(){
      JSON.parse(localStorage.getItem('SET_DICTIONARIES')).map( res =>{
        if(res.typeCode ==='ISSUE_TYPE'){
          this.type = res.itemList
        }
      })
      let paramsJson = {
        id:this.$route.query.id
      }
      this.Api.complainlist(paramsJson).then((res) => {
        if (res.code == 0) {
          this.tableLetters = res.data.map(res => {
            for(var i = 0; i<this.type.length; i++){
              if(res.issueType === this.type[i].itemValue){
                res.type = this.type[i].itemName
              }
            }
            return res
          })
        }
      })
    },
    taskReportlist(){
      let paramsJson = {
        id:this.$route.query.id
      }
      this.Api.taskReportlist(paramsJson).then((res) => {
        if (res.code == 0) {
          this.taskReportData = res.data
        }
      })
    },
    rectifyReportlist(){
      let paramsJson = {
        id:this.$route.query.id
      }
      this.Api.rectifyReportlist(paramsJson).then((res) => {
        if (res.code == 0) {
          this.rectifyReportDatas = res.data
        }
      })
    },
    problemlist(){
      let paramsJson = {
        id:this.$route.query.id
      }
      this.Api.problemlist(paramsJson).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.problemData = res.data
        }
      })
    },
    // 详情
    goInformation() {
      this.$router.push({ name: "InformationDetails", query:{id:this.$route.query.id}});
    },
    // 编辑
    goEdit() {
      this.$router.push({ name: "EditDetail", query:{id:this.$route.query.id}});
    },
    // 新建
    goAdd() {
      this.$refs.ruleForm.validate(valid => {
        if(valid){
          this.addDialogVisible = false
          this.$router.push({ name: "AddArchives", query: { type: this.ruleForm.region, name: this.ruleForm.name,id:this.$route.query.id} })
        }
      })
    },
    // 档案列表更多
    getMore() {
      this.$router.push({ name: "ArchivesMore", query: {orgId:this.$route.query.id}});
    },
    // 档案列表编辑
    goArchiveEdit(e) {
      this.$router.push({ name: "AddArchives", query: { isbuild: false,orgId:e.id} });
    },
    // 删除档案
    deletScope(e) {
      let paramsJson = {
        id:e.id
      }
      this.Api.archiveRemove(paramsJson).then((res) => {
        if (res.code == 0) {
          this.archivelist()
          this.$message.success('删除成功')
        }else{
          this.$message.error(res.message)
        }
      })
    },
    // 档案列表查看
    lookArchive(e){
      this.$router.push({ name: "Look", query: { number: 1,id:e.id } });
    },
    // 专项监督更多
    letterMore(){
      this.$router.push({name:'LetterMore', query: {orgId:this.$route.query.id}})
    },
    // 信访举报更多
    goLetter(){
      this.$router.push({name:'Letter', query: {orgId:this.$route.query.id}})
    },
    // 日常监督更多
    goDaily(){
      this.$router.push({name:'Daily', query: {orgId:this.$route.query.id}})
    },
    // 巡视巡查查看
    goSuperviseMore(e){
      this.$router.push({name:'SuperviseMore', query: { id:e.id }})
    },
    // 巡视巡查更多
    goSurMore(){
      this.$router.push({name:"SurMore", query: {orgId:this.$route.query.id}})
    },
    // 信访查看
    goLetterMore(e){
      this.$router.push({name:'LetterLook',query: { id: e.id }})
    },
    // 专项监督查看
    goSpecialLook(e){
      this.$router.push({name:"SpecialLook",query: { number: 1,id:e.id }})
    },
    // 日常监督查看
    goDailyLook(e){
      this.$router.push({name:"DailyLook",query: { id:e.id }})
    }
  },
  //name控制监督还是检查方便调接口用
  props: ["name"],
};
</script>

<style lang="less" scoped>
.all_box{
  width: 100%;
  height: calc(100% - 56px);
  overflow: auto;
}
//基础信息板块
.Basics-box {
  background-color: white;
  padding: 20px;
  margin-bottom: 10px;

  /deep/.el-table {
    //表头盒子
    .el-table__header-wrapper {
      //表头
      .el-table__header {
        //表头
        .has-gutter {
          tr {
            th {
              padding: 11px 0;
              background-color: #fafafc;
              .cell {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.85);
              }
            }
          }
        }
      }
    }
    //表格内容
    .el-table__body-wrapper {
      .el-table__body {
        tbody {
          tr {
            td {
              padding: 12px 0;
              .cell {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.85);
                line-height: 21px;
              }
              .upload-box {
                margin: 0 auto;
              }
            }
          }
          //修改输入框
          tr td:nth-child(2) {
            .cell {
              .text {
                input {
                  width: 562px;
                  height: 56px;
                  background: rgba(255, 255, 255, 1);
                  border-radius: 4px;
                  border: 1px solid rgba(221, 221, 221, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}
//表头标签
.Basics-title {
  padding: 0 0 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  background-color: white;
  .button-group-right {
  }
  > h2 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
    border-left: 4px solid #3d7fff;
    padding: 0 0 0 10px;
  }
}
//按钮的统一样式
.el-button {
  width: 70px;
  height: 30px;
  padding: 0;
  font-size: 14px;
}
//新建按钮
/deep/.el-button--BasicsBuild {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  color: rgba(61, 127, 255, 1);
}
//修改按钮
.el-button--change {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  color: #3d7fff;
}
//详情按钮
// .el-button--detail {
//   background: rgba(255, 255, 255, 1);
//   border-radius: 4px;
//   border: 1px solid rgba(221, 221, 221, 1);
//   color: #333333;
// }
//档案列表查看
//查看按钮
/deep/.el-button--BasicsLook {
  width: 33px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(22, 119, 255, 1);
  line-height: 22px;
  border: 0;
}
//编辑按钮
/deep/.el-button--BasicsEdit {
  width: 33px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(22, 119, 255, 1);
  line-height: 22px;
  margin-left: 14px;
  border: 0;
}
//删除按钮
/deep/.el-button--BasicsClear {
  width: 33px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(22, 119, 255, 1);
  line-height: 22px;
  margin-left: 14px;
  border: 0;
}
//廉政档案列表
.archives-list-box {
  padding: 20px;
  background-color: white;
  /deep/.el-table__header-wrapper {
    .has-gutter {
      tr {
        th {
          padding: 10px 0;
          background-color: #fafafa;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
}
.mb-10 {
  margin-bottom: 10px;
}
.companyName{
  display: flex;
  justify-content: flex-start;
  height: 14px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 14px;
}

// 新建档案列表
/deep/.el-dialog__header {
  height: 53px;
  padding: 20px 20px 10px;
}
/deep/.el-input__inner {
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 260px;
}
</style>